<template>
  <ga-modal v-model:visible="visible" :width="600" @close="handleCancel(formRef)">
    <template #title>添加磁盘</template>
    <ga-spin style="width: 100%" :loading="loading">
      <alert />
      <ga-card :style="{ backgroundColor: '#F7F9FC' }" title="磁盘" :bordered="false">
        <template #extra>
          <ga-link :hoverable="false" @click="tableData.push({ type: 'hdd', size: 0 })">
            <template #icon><icon-plus /></template>添加
          </ga-link>
        </template>
        <ga-table
          row-key="id"
          :columns="columns"
          :data="tableData"
          :bordered="false"
          size="medium"
          :hoverable="false"
          :pagination="false"
          :scroll="{ y: 220 }"
        >
          <template #type="{ record }">
            <ga-select size="small" v-model="record.type">
              <ga-option v-for="item in diskType" :key="item.value" :value="item.value">
                {{ item.label }}
              </ga-option>
            </ga-select>
          </template>
          <template #size="{ record }">
            <ga-input-number
              v-model="record.size"
              :style="{ width: '160px' }"
              hide-button
              :min="0"
            >
              <template #append>GB</template>
            </ga-input-number>
          </template>
          <template #action="{ rowIndex }">
            <ga-link
              status="danger"
              :hoverable="false"
              @click="() => tableData?.splice(rowIndex, 1)"
            >
              移除
            </ga-link>
          </template>
        </ga-table>
      </ga-card>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk" :loading="okLoading"> 确定 </ga-button>
    </template>
  </ga-modal>
</template>
<script setup>
import { ref, reactive } from "vue";
import { AddDisk } from "@/api/vm";
import useLoading from "@/hooks/loading";
import { diskType } from "@/constant";
import alert from "../common/alert.vue";

const { loading, setLoading } = useLoading(false);
const okLoading = ref(false);
const tableData = ref([{ type: "hdd", size: 0 }]);
const visible = ref(false);
const curId = ref("");
const open = (record) => {
  visible.value = true;
  if (record && record?.id) {
    setLoading(true);
    curId.value = record.id;
    setLoading(false);
  }
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  console.log("tableData", tableData.value);
  if (tableData.value?.length > 0) {
    okLoading.value = true;
    // try {
    //   const obj = formatVpcCreateParams(type, formData, tableData.value);
    //   const { code } = await AddDisk(obj, "network-vpc");
    //   if (code === 20000) Message.success("操作成功");
    //   emits("fetchData");
    //   visible.value = false;
    // } finally {
    //   okLoading.value = true;
    // }
  }
};
const handleCancel = () => {
  curId.value = "";
  tableData.value = [{ type: "hdd", size: 0 }];
};
const columns = [
  {
    title: "磁盘类型",
    dataIndex: "type",
    slotName: "type",
  },
  {
    title: "磁盘大小",
    dataIndex: "size",
    slotName: "size",
  },
  {
    title: "操作",
    width: 60,
    slotName: "action",
  },
];
defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.garco-alert) {
  padding: 0px 8px;
  font-size: 12px;
  line-height: 22px;
  margin-bottom: 16px;
}
</style>
